/*
公共基础样式
样式重置
*/

@import './theme.less';
html {
  font-size: 62.5%;
  line-height: 1.5;
}

// 媒体查询
@media only screen and (min-width:768px) and (max-width:1024px) {
  html {
    font-size: 87.5%;
  }
}

@media only screen and (min-width:1024px) {
  html {
    font-size: 100%;
  }
}

* {
  box-sizing: border-box;
}

html, body {
  background-color: transparent;
  font-family: @font-family;
  color: @color-font-gray;
  overflow: hidden;
  -webkit-font-smoothing: antialiased !important;
  height: 100%;
}

html, body, div, p,ul {
  margin: 0;
  padding: 0;
}

ul li, dl dt {
  list-style: none
}

#root {
  height: 100%;
}

/* overflow text*/

.textOverflow {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 404 */
.nofound-wrap {
  text-align: center;
}


/* icon定义 start*/
.app-icon {
  display: inline-block;
  width: 26px;
  height: 26px;
  background-color: transparent;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  vertical-align: middle;
}
// 微信
.icon-wechat{
  background-image: url(../resource/image/wechat.png);
}
// 微博
.icon-weibo{
  background-image: url(../resource/image/weibo.png);
}
// qq
.icon-qq{
  background-image: url(../resource/image/qq.png);
}
// 大厅
.app-icon.icon-dt1{
  background-image: url(../resource/image/dt1.png);
}
.app-icon.icon-dt2{
  background-image: url(../resource/image/dt2.png);
}

// 开奖
.app-icon.icon-kj1{
  background-image: url(../resource/image/kj1.png);
}
.app-icon.icon-kj2{
  background-image: url(../resource/image/kj2.png);
}

// 预约
.app-icon.icon-yy1{
  background-image: url(../resource/image/yy1.png);
}
.app-icon.icon-yy2{
  background-image: url(../resource/image/yy2.png);
}

// 左返回
.app-icon.icon-left{
  background-image: url(../resource/image/left.png);
}

// 右
.app-icon.icon-right{
  background-image: url(../resource/image/right.png);
}

// 火vs
.app-icon.icon-hot{
  background-image: url(../resource/image/hot.png);
}

// 顶部下拉
.app-icon.icon-dropdown{
  width: 16px;
  height: 16px;
  background-image: url(../resource/image/dropdown.png);
  vertical-align:top;
  margin-left: @space-sm;
}

//赛事筛选
.app-icon.icon-sssx{
  background-image: url(../resource/image/sssx.png);
}

//走势图
.app-icon.icon-zst{
  background-image: url(../resource/image/zst.png);
}

// 玩法说明
.app-icon.icon-wfjs{
  background-image: url(../resource/image/wfjs.png);
}

// 摇一注
.app-icon.icon-yyz{
  background-image: url(../resource/image/yyz.png);
}
// 遗漏
.app-icon.icon-yl{
  background-image: url(../resource/image/yl.png);
}
// 定位
.app-icon.icon-point{
  background-image: url(../resource/image/kj1.png);
  width: 15px;
  height:18px;
}
// 证
.app-icon.icon-zheng{
  background-image: url(../resource/image/zheng.png);
  width: 15px;
  height:18px;
}
// 保
.app-icon.icon-bao{
  background-image: url(../resource/image/bao.png);
  width: 15px;
  height:18px;
}

// 下拉选择
.app-icon.icon-drop{
  background-image: url(../resource/image/right.png);
  transform: rotate(90deg);
  width: 20px;
  height: 20px;
  opacity: 0.65;

}


/* icon定义 end*/



/* 公共样式 start*/
.page-wrap{
  height: 100%;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  background: white;
}
.page-box{
  height: 100%;
  overflow: hidden;
  background: white;
  position: relative;
  .page-content{
    height:100%;
    padding-top: @navbar-height;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    background: white;
    position: relative;
  }
  .page-content.contain-footer{
    padding-bottom: @footer-height;
  }
  .page-footer{
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: @footer-height;
    border-top: @border-base;
    z-index: 10;
    // overflow: hidden;
    background: white;
  }
}
// 红色字体
.font-red{
  color: @color-font-red!important;
}
.font-blue{
  color: @color-font-blue!important;
}
.font-yellow{
  color:@color-font-yellow!important;
  font-size: @font-size2;
}

// tabs下划线样式重置
.am-tabs-default-bar-underline{
  border:none!important;
  &::before{
    content: '';
    display: inline-block;
    position: absolute;
    top: 0;
    left: 50%;
    width: 3rem;
    height: 2px;
    background: @color-back-red;
    transform: translateX(-50%);
  }
}
// tabs激活文字颜色
.am-tabs-default-bar-tab{
  font-size: @font-size7 !important;
  color: @color-font-gray !important;
}
.am-tabs-default-bar-tab-active{
  color: @color-font-red !important;
}

// mask
.menu-mask{
  top:@navbar-height;
  position: absolute;
  width: 100%;
  height: calc(~'100% - 4.4rem');
  background-color:rgba(0,0,0,.4);
  z-index: 89;
  overflow: hidden;
  .mask-content{
    height: 100%;
    overflow: auto;
  }
}

// 从左到右渐变
.ltr-orange-red{
  background:linear-gradient(to right,@color-back-orange,@color-back-red) !important; 
}
.ltr-blue{
  background:linear-gradient(to right,@color-back-blue-light,@color-back-blue)!important; 
}

//手风琴--购彩列表
.list-accordion{
  .list-wrap{
    .list:last-of-type{
      border-bottom: 0;
    }
  }
}


// 按钮
.common-btn{
  height: 100%;
  flex-grow: 1;
  flex-basis: 8rem;
  flex-shrink: 0;
  font-size: @font-size5;
  .flex-col-center;
}
// 红色背景按钮

.red-btn{
  color: white;
  .ltr-orange-red;
}
// 禁用按钮
.disabled-btn{
  background: #dadada;
  color: white;
}

// 普通白色背景按钮
.white-btn{
  background: #fff;
  color: @color-font-gray;
}


// 分割线--垂直
.divider-vertical{
  width: 1px;
  background: @border-color-base;
  height:2.7rem;
  align-self: center;
}

// 分割线--水平
.divider-hor{
  width: 90%;
  background: @border-color-base;
  height:1px;
  margin: @space-normal auto;

}

  // 球样式
  .ball-item{
    width: 3.2rem;
    height: 3.2rem;
    overflow: hidden;
    border-radius: 50%;
    font-size: @font-size3;
    margin: @space-base;
    background: @color-back-gray2;
    transition: all 250ms ease-in;
    .flex-col-center;
  }
  .ball-item.red{
    color: @color-font-red;
  }
  .ball-item.blue{
    color: @color-font-blue;
  }
  .ball-item.checked{
    color:white;
    font-size: @font-size8;
  }
  .ball-item.red.checked{
    .ltr-orange-red;
  }
  .ball-item.blue.checked{
    .ltr-blue;
  }


/* 公共样式 end*/